<template>
    <div class="asset-container">
      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="color: #409EFF">首页 / 房型管理</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <div class="search_form">
            <el-form ref="form" :model="searchForm" label-width="80px">
              <el-form-item label="房型编号：" label-width="100px">
                <el-input style="width: 300px" v-model="searchForm.skuCode" placeholder="请输入房型编号"></el-input>
                <el-button icon="el-icon-search" style="margin-left: 20px" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="handle_list">
            <el-button icon="el-icon-edit-outline" @click="showApplyFormDialog" :disabled="!multipleSelection || multipleSelection.length === 0" style="margin-left: 20px" type="primary">登记入住</el-button>
            <el-button icon="el-icon-user" @click="showApplyFormDialog" :disabled="!multipleSelection || multipleSelection.length === 0" style="margin-left: 20px" type="primary">办理入住</el-button>
          </div>
        </div>
      </el-card>

      <el-table
          ref="multipleTable"
          :data="skuList"
          tooltip-effect="dark"
          style="margin-top:50px; width: 100%"
          @select="handleSelect">
        <el-table-column
            type="selection"
            width="100">
        </el-table-column>
        <el-table-column
            prop="skuDetailId"
            label="房间号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="skuName"
            label="类型"
            width="100">
        </el-table-column>
        <el-table-column
            prop=""
            label="房型参考图"
            width="200px">
          <template slot-scope="scope">
            <img style="width: 100px; height: 75px" :src="scope.row.skuImg" alt="显示失败" />
          </template>
        </el-table-column>
        <el-table-column
            prop="remark"
            label="房型描述"
            width="300px"
        >
        </el-table-column>
        <el-table-column
            prop="skuSize"
            label="大小(m²)">
        </el-table-column>
        <el-table-column
            prop="fee"
            label="价格(元)">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 'U'" type="success">空闲中</el-tag>
            <el-tag v-else-if="scope.row.status === 'R'" type="info">已入住</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="上架时间"
            width="200">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
            prop=""
            label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog title="登记入住" :visible.sync="dialogFlag" width="30%" :append-to-body="true">
        <el-form :model="applyForm">
          <el-form-item label="手机号：" label-width="120px">
            <el-input v-model="applyForm.msisdn" style="width: 300px" autocomplete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
<!--          <el-form-item label="用户名：" label-width="120px">-->
<!--            &lt;!&ndash;            <el-select v-model="applyForm.username" placeholder="请选择活动区域">&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-option label="区域一" value="shanghai"></el-option>&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-option label="区域二" value="beijing"></el-option>&ndash;&gt;-->
<!--            &lt;!&ndash;            </el-select>&ndash;&gt;-->
<!--          </el-form-item>-->
          <el-form-item label="房间号：" label-width="120px">
            {{ applyForm.skuDetailId }}
          </el-form-item>
          <el-form-item label="房间描述：" label-width="120px">
            {{ applyForm.skuDesc}}
          </el-form-item>
          <el-form-item label="注意事项：" label-width="120px">
            <el-tag v-if="applyForm.windowFlag === 'Y'" type="success" style="margin-right: 10px">有窗</el-tag>
            <el-tag v-else type="danger" style="margin-right: 10px">无窗</el-tag>
            <el-tag v-if="applyForm.breakFastFlag === 'Y'" type="success" style="margin-right: 10px">有早餐</el-tag>
            <el-tag v-else type="danger" style="margin-right: 10px">无早餐</el-tag>
            <el-tag v-if="applyForm.noteFlag === 'Y'" type="success" style="margin-right: 10px">可打小票</el-tag>
            <el-tag v-else type="danger" style="margin-right: 10px">不可打小票</el-tag>
            <el-tag v-if="applyForm.smokeFlag === 'Y'" type="success" style="margin-right: 10px">可吸烟</el-tag>
            <el-tag v-else type="danger" style="margin-right: 10px">禁烟</el-tag>
          </el-form-item>
          <el-form-item label="房间参考图：" label-width="120px">
            <img style="width: 200px; height: 150px" :src="applyForm.skuImg" alt="显示失败" />
          </el-form-item>
          <el-form-item label="价格：" label-width="120px">
            <span style="color: red; font-size: 24px">{{ '￥' + applyForm.fee }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFlag = false">取 消</el-button>
          <el-button type="primary" @click="applySubmit">提 交</el-button>
        </div>
      </el-dialog>

      <el-dialog title="确认用户信息" :visible.sync="rnsDialogFlag" width="20%" :append-to-body="true">
        <el-form :model="rnsForm">
          <el-form-item label="用户名：" label-width="120px">
            {{ rnsForm.username }}
          </el-form-item>
          <el-form-item label="手机号：" label-width="120px">
            {{ rnsForm.msisdn }}
          </el-form-item>
          <el-form-item label="身份证：" label-width="120px">
            {{ rnsForm.idCard }}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rnsDialogFlag = false">取 消</el-button>
          <el-button type="primary" @click="confirmApply">登 记</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
import busiApi from "../../../api";
export default {
    name: 'Sku',
    components: {
        
    },
    data() {
        return {
          searchForm: {
            skuCode: ''
          },
          skuList: [],
          multipleSelection: [], // 选中的记录
          dialogFlag: false,
          applyForm: {
            skuDetailId: '',
            skuCode: '',
            msisdn: '',
          },
          rnsForm: {
            username:'',
            idCard:''
          },
          rnsDialogFlag: false
        }
    },
    created() {
        this.loadData();
    },
    methods: {
      handleSelect(selection, row) {
        this.multipleSelection = selection
        this.applyForm = row
      },
      handleClick(item) {
        console.log('当前操作记录：', item)
      },
      loadData() {
        busiApi.querySkuList({}).then(res => {
          this.skuList = res.data
          this.skuList.map(sku => {
            // 格式化价格
            sku.fee = sku.fee / 100
            return sku
          })
        })
      },
      showApplyFormDialog() {
        if(this.multipleSelection && this.multipleSelection.length > 1) {
          this.$message.error('不能同时选择入住多间房间')
          return
        }
        this.dialogFlag = true
      },
      // 提交入住对话框 确认 按钮
      applySubmit() {
        if(!this.applyForm.msisdn) {
          this.$message.error('请输入预定客人的手机号')
          return
        }
        // 校验是否实名
        busiApi.checkRns({msisdn: this.applyForm.msisdn}).then(res => {
          this.rnsDialogFlag = true
          this.rnsForm.username = res.data.username
          this.rnsForm.msisdn = res.data.msisdn
          this.rnsForm.idCard = res.data.idCard
        })
      },
      // 用户信息确认对话框 确认登记 按钮
      confirmApply() {


        this.clearForm()
      },
      // 清除对话框数据
      clearForm() {
        this.rnsDialogFlag = false
        this.dialogFlag = false
        this.rnsForm = {}
        this.applyForm = {}
      }

    }
}
</script>

<style lang="less">
    .filter-card {
        margin-bottom: 30px;
    }
    .list-table {
        margin-bottom: 30px;
    }
    .article-cover {
        width: 100px;
        background-size: cover;
    }
</style>